<template>
  <div class="x-box-pc" :style="{ ...cfg.style }">
    <div class="x-branch-pc">
      <div class="bg"></div>
      <div class="branch-logo flc">
        <img src="@/assets/icons/x-mov.png" />
      </div>
      <div class="mt-5px">
        <slot></slot>
      </div>
    </div>
    <div class="branch-footer absolute left-40px bottom-26px w-142px h-30px">
    </div>
    <div class="z-1 absolute top-0px -right-10px">
      <button class="ssml-close-btn" @click="onClose">
        <img src="@/assets/icons/pc/pc-close.png" />
      </button>
    </div>
  </div>
</template>

<script lang="ts" setup name="BranchWrapperPc">

const props = defineProps(['cfg'])
import { useUIStore } from '@/store/ui'

const UIStore = useUIStore()

const onClose = () => {
  UIStore.delUI(props.cfg.axis_id)
}
</script>

<style lang="scss" scoped>
.x-box-pc {
  @apply absolute flc z-100;

  .ssml-close-btn {
    width: 25px;
    height: 25px;

    &:hover {
      opacity: 0.6;
    }
  }
}

.x-branch-pc {
  @apply relative text-white flex flex-col;
  padding: 30px;
  padding-top: 35px;
  height: 100%;

  .bg {
    @apply absolute top-0 left-0 right-0 bottom-0 z-0 backdrop-filter backdrop-blur-25px;
    background: linear-gradient(135deg, rgba(215, 228, 255, 0.5) 0%, rgba(215, 228, 255, 0.2) 100%);
    box-shadow: 0px 2px 30px 0px rgba(25, 47, 87, 0.05);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.3);
  }

  .branch-footer {
    background: url('/src/assets/images/pc/form-logo.png') no-repeat;
    background-size: contain;
  }

  .branch-logo {
    @apply absolute text-center z-2 backdrop-filter backdrop-blur-6;
    left: 50%;
    width: 130px;
    top: -20px;
    height: 42px;
    background: rgba(255, 255, 255, 0.25);
    box-shadow: 0px 2px 30px 0px rgba(25, 47, 87, 0.05);
    border-radius: 20px;
    line-height: 42px;
    margin-left: -65px;
  }
}
</style>